const path = require('path');
// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// @babel/core @babel/preset-env babel-loader core-js

// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
  mode: 'development',
  entry: "./src/index.ts", // 指定入口文件
  output: {
    path: path.resolve(__dirname, "dist"), // 指定打包文件所在的目录
    filename: "bundle.js", // 打包后文件的文件名
    // 告诉webpack不使用箭头函数
    environment: {
      arrowFunction: false,
      const: false
    }
  },
  module: { // 指定webpack打包时要使用的模块
    rules: [ // 指定要加载的规则
      {
        test: /\.ts$/, // 指定的是规则生效的文件
        // use: "ts-loader", // 要使用的loader
        use: [ 
          { // 配置babel
            loader: 'babel-loader', // 指定加载器
            // 设置babel
            options: {
              // 设置预定义的环境
              "presets": [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    "targets": { // 要兼容的目标浏览器
                      "chrome": "58",
                      "ie": "11" // 注意webpack自己的箭头函数output.environment
                    },
                    "corejs": "3", // 指定corejs的版本 ps:promise
                    "useBuiltIns": "usage"// 使用corejs的方式 usage表示按需加载
                  }
                ]
              ]
            }
          }, 
          "ts-loader"
        ], // 要使用的loader
        exclude: /node_modules/
      }, {
        // loader 加载器 将工具与webpack整合 链接到一起
        // 设置less文件的处理
        test: /\.less$/,
        use: ['style-loader', 'css-loader',
        // 引入postcss 
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [
                [
                  "postcss-preset-env",
                  {
                    browsers: "last 2 versions"
                  }
                ]
              ]
            }
          }
        }, 
        "less-loader"]
        // babel js  postcss css
      }
    ]
  },
  plugins: [ // 配置webpack插件
    new HtmlWebpackPlugin({
      // title: "这是一个自定义的title",
      template: "./src/index.html"
    }),
    new CleanWebpackPlugin()
  ],
  resolve: { // 用来设置引用模块
    extensions: ['.ts', '.js']
  }
}
